<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--uncomment to use online cdn sources-->
    <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">-->

    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/vendor/bootstrap-5.2.0.min.css')  }}">
    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/index.css')  }}">

    <title>Chinese PDF OCR</title>
  </head>
  <body>
    <div id="top-banner" class="container justify-content-center fixed-top p-1">
      <div class="row text-center">
        <div class="col-2">
          <label for="file" class="custom-file-upload">
            <i class="fa fa-cloud-upload"></i> Upload PDF
          </label>
          <input id="file" accept=".pdf" type="file"/>
        </div>
        <div class="col-3">
          <button id="prev" type="button" class="btn btn-primary w-75">Previous 🔼</button>
        </div>
        <div class="col-3">
          <button id="next" type="button" class="btn btn-primary w-75">🔽 Next</button>
        </div>
        <div class="col-2">
            <div class="row row-cols-sm-auto justify-content-center">
                <div class="col p-1">
                    Page:
                </div>
                <div class="col p-1">
                    <span id="page_num"></span>
                </div>
                <div class="col p-1">
                    /
                </div>
                <div class="col p-1">
                    <span id="page_count"></span>
                </div>
            </div>
        </div>
        <div class="col-2">
          <button id="do-ocr" type="button" class="btn btn-primary w-100">📖🔍 OCR</button>
        </div>
      </div>
    </div>

    <div id="alert-flex-container" class="d-flex justify-content-center mt-5">
    </div>

    <div id="main" class="container justify-content-center mt-5">
      <div class="row">
        <div class="col">
          <div id="canvas-layers" class="container w-100 p-0">
            <canvas id="pdf-layer"></canvas>
            <canvas id="ocr-layer"></canvas>
          </div>
        </div>
      </div>
    </div>

    <!--uncomment to use online cdn sources-->
    <!--<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>-->
    <!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>-->
    <!--<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/521/fabric.min.js"></script>-->
    <!--<script src="https://combinatronics.com/JustCarty/BootstrapAlerts/master/bootstrap-alerts.js"></script>-->

    <script src="{{ url_for('static',filename='scripts/vendor/jquery-3.6.0.min.js')  }}"> </script>
    <script src="{{ url_for('static',filename='scripts/vendor/bootstrap-5.2.0.bundle.min.js')  }}"> </script>
    <script src="{{ url_for('static',filename='scripts/vendor/pdf-2.15.214.js')  }}"> </script>
    <script src="{{ url_for('static',filename='scripts/vendor/fabric-5.2.1.min.js')  }}"> </script>
    <script src="{{ url_for('static',filename='scripts/vendor/bootstrap-alerts.js')  }}"> </script>
    <script src="{{ url_for('static',filename='scripts/index.js')  }}"> </script>
  </body>
</html>



